import { GetUserItem } from "@/api";
import { Button, Switch, Table } from "antd";
import { FC, memo } from "react";

interface UserTableProps {
  pageSize: number;
  total: number;
  handlePageChange: (page: number, pageSize: number) => void;
  dataSource: GetUserItem[];
  onEdit: (id: number) => void;
  handleDelete: (id: number) => void;
  onAssign: (id: number) => void;
  onChangeSwidth: (e: boolean, mg_state: boolean, record: GetUserItem) => void;
}
const UserTable: FC<UserTableProps> = memo(({
  pageSize,
  total,
  handlePageChange,
  dataSource,
  onEdit,
  handleDelete,
  onAssign,
  onChangeSwidth,
}: UserTableProps) => {
  const columns = [
    {
          title: "序号",
          dataIndex: "id",
          render: (_: string, __: GetUserItem, index: number) => {
            return index + 1;
          },
        },
        {
          title: "用户名",
          dataIndex: "username",
        },
        {
          title: "邮箱",
          dataIndex: "email",
        },
        {
          title: "电话",
          dataIndex: "mobile",
        },
        {
          title: "角色",
          dataIndex: "role_name",
        },
        {
          title: "状态",
          dataIndex: "mg_state",
          render: (mg_state: boolean, record: GetUserItem) => {
            return (
              <Switch
                checked={mg_state}
                onChange={(e) => {
                  onChangeSwidth(e, mg_state, record);
                }}
              />
            );
          },
        },
        {
          title: "操作",
          dataIndex: "action",
          render: (_: string, record: GetUserItem) => {
            return (
              <>
                <Button type="primary" onClick={() => onEdit(record.id)}>
                  编辑
                </Button>
                <Button
                  onClick={() => handleDelete(record.id)}
                  style={{ background: "red", color: "#fff",margin:"0 10px" }}
                >
                  删除
                </Button>
                <Button
                  onClick={() => onAssign(record.id)}
                  style={{ background: "orange", color: "#fff" }}
                >
                  分配角色
                </Button>
              </>
            );
          },
        },
      ];
  return (
    <Table
      style={{ marginTop: 10 }}
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["2", "5", "10"],
        showTotal: (total) => `共${total}条`,
        pageSize: pageSize,
        total,
        onChange: handlePageChange,
        onShowSizeChange: handlePageChange,
      }}
      columns={columns}
      dataSource={dataSource}
    ></Table>
  );
});

export default UserTable;
